<template>
  <el-container class="setting_shopping-mall_goods-set">
    <el-main>
      <div class="wrapper-box">
        <div class="dis">
          <div class="fin-setting-content">
            <el-form ref="h5Set" :model="params">
              <el-card shadow="never" class="cardInfo">
                <div class="bg-white-panel">智能问答：</div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item class="person-center-form-item">
                          <span class="form-item-title">开启只能问答功能：</span>
                          <el-switch v-model="params.settingBase.openSmart" label="关闭" :active-value="1" :inactive-value="2" @change="handleChange" />
                          <span class="form-item-title"> (开启后，根据关键词从知识库查询，如果没有查到责转人工)</span>
                        </el-form-item>
                      </div>
                    </div>
                    <div v-if="params.settingBase.openSmart == 1" class="dis al_item" style="margin-top: 10px;">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item class="person-center-form-item" style="margin-left: 100px;">
                          <span class="form-item-title">转人工关键词：</span>
                          <div style="display: inline-block;justify-content: flex-start;width:700px;">
                            <div style="display: inline-flex; padding-left: 20px;background: #f8f8f8;width: 100%;vertical-align: middle;">
                              <div>
                                <vxe-button type="info" size="mini" icon="el-icon-plus" style="margin-top: 15px;" @click="selectKeyWord()">添加</vxe-button>
                              </div>
                              <div v-if="params.settingBase.toPersonKeyWord.length >0" style="margin: 10px;background: #fcfcfc;border: 1px solid #d5d5d5;width: 700px;">
                                <el-tag v-for="(tag, index) in params.settingBase.toPersonKeyWord" :key="index" type="" hit="true" effect="plain" closable="true" style="margin-left:5px;margin-bottom: 5px;cursor: pointer;" @close="closeTag(index)">{{ tag }}</el-tag>
                              </div>
                            </div>
                          </div>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-form>
          </div>
        </div>
      </div>
      <div class="btn-footer">
        <el-button>取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </el-main>
    <el-dialog v-if="dialogVisible" width="25%" title="添加关键词" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="wordParam" :rules="rules" label-width="5rem">
        <el-row :gutter="40">
          <el-col :span="24">
            <el-form-item prop="name" label="关键词：">
              <el-input v-model="wordParam.name" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitWord">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { kfAutoReplySmartSettingView, kfAutoReplySmartSettingSave } from '@/api/shoppingMall'
export default {
  components: {
  },
  data() {
    return {
      dialogVisible: false,
      params: {
        settingBase: {
          openSmart: 2,
          toPersonKeyWord: [],
          needRefer: 1
        }
      },
      wordParam: {},
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getSettingInfo()
  },
  methods: {
    handleChange(val) {
      if (val === 2) {
        this.params.settingBase.toPersonKeyWord = []
      }
    },
    selectKeyWord() {
      this.dialogVisible = true
    },
    submitWord() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.params.settingBase.toPersonKeyWord.push(this.wordParam.name)
          this.dialogVisible = false
          this.wordParam.name = ''
        }
      })
    },
    closeTag(index) {
      if (this.params.settingBase.toPersonKeyWord) {
        this.params.settingBase.toPersonKeyWord.splice(index, 1)
      }
    },
    getSettingInfo() {
      kfAutoReplySmartSettingView().then(res => {
        if (res) {
          if (res.code) {
            this.$message.error(`${res.msg}`)
          } else {
            this.params.settingBase = res.settingBase == null ? this.params.settingBase : res.settingBase
          }
        }
      })
    },
    // 保存
    submit() {
      if (this.params.settingBase.openSmart === 2) {
        this.params.settingBase.toPersonKeyWord = []
      }
      this.$confirm('确认要修改配置?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        kfAutoReplySmartSettingSave(this.params).then(res => {
          if (res) {
            this.$message.success('保存成功！')
            this.getSettingInfo()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .setting_shopping-mall_goods-set {
    .check-box-w{
      width: 60%;
    }
    background: #d8d8d8;
    padding: 4px;
    width: 100%;
    height: 90%;
    border-radius: 3px;
    overflow: auto;
    .clearfix{
      padding:5px;
      padding-top: 0;
      height: 15px;
      display: flex;
      align-items: center;
      >div {
        border: 0px solid #e6ebf5;
        flex-grow: 1;
        width:0;
        margin-right: 20px;
      }
    }
    }
    .fin-setting-content {
      width: 100%;
      margin: 0px 0 4px 4px;
      overflow-x: hidden;
      overflow-y: auto;
      border-radius:5px;
      .cardInfo {
        width: 100%;
          margin-top: 2px;
          padding: 2px;
       }
      .user-center-item {
        box-sizing: border-box;
        cursor: pointer;
        padding-bottom: 10px;
        &.active {
          border: 1px solid #1890ff
        }
      }

    }
    .nav-item {
      font-size: 14px;
      background: #ffffff;
      border: 0px solid #e3e2e5;
      border-radius: 4px;
      margin-bottom: 10px;
      width: 100%;
      display: inline-block;

      &:nth-child(odd) {
        margin-right: 10px;
        font-size: 14px;
        color: #595961;
      }

      .item-header {
        border-radius: 4px 4px 0 0;
        width: 100%;
        line-height: 39px;
        padding: 0 10px 0 5px;
      }

      .item-content {
        width: 100%;
        padding: 5px 0;
      }
    }
    .person-center-form-item {
      font-size: 14px;

      margin-left: 20px;
      .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
        font-size: 13px;
        color: #172161;
      }
      .el-input-number.is-without-controls.el-input__inner{
        width: 20px;
        height: 14px;
      }
      .el-input.is-without-controls.el-input__inner{
        height: 14px;
      }
      .form-item-input{
        min-height: 14px;
        width: 300px;
        font-size: 12px;
        .el-input__inner{
           padding-right: 45px;
        }
      }
      .form-item-title{
        padding-left: 6px;
        padding-right: 6px;
        color: #666;
      }
      .flex-just{
        vertical-align: middle;
        width: 90px;
      }
    }
    .base-info {
      display: flex;
      width:100%;
      .basics-info {
        margin: 0 auto;
      }
    }
    .el-form-item  {
      margin-bottom: 30px;
    }
    .el-col {
      margin-bottom: 0px;
    }
    .noMargin {
      margin-bottom: 0 !important;
    }
  .bg-white-panel {
    padding: 5px;
    width: 100%;
    font-size: 14px;
    font-weight: bolder;
    border-radius: 4px;
    margin-bottom: 5px;
  }
  .el-select .el-input {
    width: 100px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .my-list {
    width:100%;
  }
  .my-list .my-list-item {
    font-size: 12px;
    color: cornflowerblue;
    height: 28px;
    padding: 1px 0 0 15px;
    border: 1px solid #f6f8f9;
  }

</style>
